<template>
	<transition :name="transition">
		<view class="calendar-tz" v-if="isShow">
			<slot name="header"></slot>
			<!-- 顶部年月栏 -->
			<view class="header">
				<view class="btns">
					<view class="btn-icon" v-if="isShowYear" @click="lastYear">
						<text class="arrow-left"></text>
						<text class="arrow-left"></text>
					</view>
					<view class="btn-icon" @click="lastMonth" v-if="mode == 1"><text class="arrow-left"></text></view>
				</view>
				<view>
					<view class="date-title">
						{{ year }}年
						<text v-if="mode == 1">{{ month }}月</text>
					</view>
				</view>

				<view class="btns">
					<view class="btn-icon" @click="nextMonth" v-if="mode == 1"><text class="arrow-right"></text></view>
					<view class="btn-icon" v-if="isShowYear" @click="nextYear">
						<text class="arrow-right"></text>
						<text class="arrow-right"></text>
					</view>
				</view>
			</view>
			<!-- 顶部年月栏 end -->
			<!-- 周日~周六 -->
			<view class="week-number" v-if="mode == 1">
				<text v-for="(item, index) in weekList" :key="index">{{ item }}</text>
			</view>
			<!-- 周日~周六 end -->
			<!-- tips栏 -->
			<view class="tips" v-if="title">{{ title }}</view>
			<!-- tips栏 end -->

			<!-- 日 -->
			<swiper circular :current="current" @change="changedate" class="swiperMain" :style="{height:swiperHigh}">
				<swiper-item v-for="di in 3" :key="di" class="swiperItem" >
					<view class="content" id="scrollWrap" v-if="mode == 1">
						<view class="con" v-for="(item, index) in calendar" :key="index" :id="item.year + '' + item.month">
							<view class="each-month">
								<view class="each-day" v-for="(day, idx) in item.dayList" :key="idx">
									<block>
										<!-- :style="themeBg(day, item.month, item.year)" -->
										<view
											@click="chooseDate(day, item.month, item.year)"
											:style="{
												background: themeBg(day, item.month, item.year).background || '#fff',
												color: themeBg(day, item.month, item.year).color || '#333',
												border: themeBg(day, item.month, item.year).border || 'none',
												width: themeBg(day, item.month, item.year).width || '60rpx',
												height: themeBg(day, item.month, item.year).height || '60rpx',
												'line-height': themeBg(day, item.month, item.year)['line-height'] || '60rpx',
												margin: themeBg(day, item.month, item.year).margin || '0 auto'
											}"
											:class="[addClassName(day, item.month, item.year)]"
										>
											<view class="day">{{ day ? day : '' }}</view>
										</view>
									</block>
									<view class="currDay" :style="{color:year+''+item.month+''+day===activiteDay?'#fff':''}">{{ setTipCurr(day, item.month) }}</view>
									<view class="recent" v-if="isSiginDay(item.year, item.month, day)=='休息'">
										休息
									</view>
									<view class="recent duty" v-if="isSiginDay(item.year, item.month, day)=='值班'">
										值班
									</view>
									<view class="recent work" v-if="isSiginDay(item.year, item.month, day)=='上班'">
										上班
									</view>
									<!-- 小圆点 -->
									<view class="radioday" v-if="isClock" :style="{ background: isSiginDay(item.year, item.month, day,item) }"></view>
								</view>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>

			<!-- 日 end -->

			<!-- 月份选择 -->
			<view class="month-pick" v-if="mode == 2">
				<view @click="pickMonth(index)" :class="month == index + 1 ? 'month-pick-month activity' : 'month-pick-month'" v-for="(item, index) in monthList" :key="index">
					{{ item }}月
				</view>
			</view>
			<slot name="footer"></slot>
		</view>
	</transition>
</template>

<script>
// import hldData from './holidays.js';
import {getHolidays} from '@/apis/sign.js';
// import { hld2021, hld2022 } from './holidays.js';
import dayjs from 'dayjs';
export default {
	// 
	// mode 1日期选择  2月份选择
	// @chooseDate(day, month, year)选择某日事件
	// @chooseMonth(month,year)选择某月事件 
	// 
	props: {
		defaultDate:{
			type: [String,Number],
			default: new Date().getTime()
		},
		tomorrow: {
			// 是否初始化明天
			type: Boolean,
			default: true
		},

		evens: {
			// 显示计划列表
			type: Array,
			default() {
				return [];
			}
		},

		isShow: {
			// 是否显示
			type: [Boolean],
			default() {
				return true;
			}
		},

		transition: {
			// 动画类型slide
			type: [String],
			default() {
				return '';
			}
		},
		title: {
			// 头部的一段文本 tips
			type: [String, Object],
			default() {
				return '';
			}
		},
		mode: {
			// 模式：1普通日历，2月份选择
			type: [String, Number],
			default() {
				return 1;
			}
		},
		startDate: {
			// 开始日期
			type: [String, Object, Date]
		},
		endDate: {
			// 结束日期
			type: [String, Object, Date]
		},
		betweenStart: {
			// 日历可选范围开始
			type: [String, Object, Date],
			default() {
				return '';
			}
		},
		betweenEnd: {
			// 日历可选结束日期
			type: [String, Object, Date],
			default() {
				return '';
			}
		},
		initMonth: {
			// 初始化的月数
			type: [String, Number],
			default() {
				return 1;
			}
		},
		themeColor: {
			// 主题色
			type: [String],
			default: '#0091FF'
		},
		isShowYear: {
			// 是否取消年的选择
			type: Boolean,
			default: true
		},
		dateList: {
			// 日期标记状态
			type: Array,
			default() {
				return [];
			}
		},
		// 日历的高度
		swiperHigh:{
			type:String,
			default:'600rpx'
		},
		// 是不是打卡页面
		isClock:{
			type:Boolean,
			default:true
		}

	},
	data() {
		return {
			swiperHeight:'',
			monthList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
			year: '',
			month: '',
			day: '',
			startDates: '',
			endDates: '',
			calendar: [],
			weekList: ['日', '一', '二', '三', '四', '五', '六'],
			activiteDay: '',
			current: 1,
			currAct: 0,
			currMonth: '',
			currdays: '',
			// 全年节假日
			hldData:{}
		};
	},
	watch: {
		isShow() {
			this.init();
		},
		mode() {
			this.init();
		}
	},
	mounted() {
		this.init();
		this.getHoliday();
	},
	computed: {},
	methods: {
		// 获取元素高度
		getCurrentSwiperHeight(element) {
			let query = uni.createSelectorQuery().in(this);
			query.select(element).boundingClientRect(data => {
				console.log(data,88888);
				this.swiperHeight = data.height;
			}).exec();
		},

		// 第一次默认的curr减去当前的curr 则为往前滑以此类推都是往前滑
		changedate(e) {
			let pdcurrent = this.current;
			let current = e.detail.current;
			this.current = current;
			if (pdcurrent - current == -1 || pdcurrent - current == 2) {
				if (this.month == 12) {
					this.year = this.year + 1;
					this.month = 1;
				} else {
					this.month = this.month + 1;
				}
			} else {
				if (this.month == 1) {
					this.year = this.year - 1;
					this.month = 12;
				} else {
					this.month = this.month - 1;
				}
			}
			this.createClendar();
			if (this.year > new Date().getFullYear()) {
				this.getHoliday();	
			}
		},
		getHoliday() {
			getHolidays({ year: this.year }).then(({data}) => {
				if (data) {
					this.hldData = data || {};
				}
			});
		},
		setMonth(m) {
			let k = Number(m) + 1;
			if (k < 10) {
				k = '0' + '' + k;
			} else {
				k = k + '';
			}
			return k;
		},
		set0(k) {
			if (k < 10) {
				return '0' + '' + k;
			} else {
				return k + '';
			}
		},
		// 例遍假期
		setHolidays(dd) {
			let date = new Date(dd);

			let y = date.getFullYear();
			let m = this.setMonth(date.getMonth());
			let d = this.set0(date.getDate());

			let dateIndex = -1;
			// 获取节假日数据
			if (this.hldData.Year === y) {
				dateIndex = (this.hldData.JsonStr || []).findIndex(ele => ele.MonthDay === m + '' + d);
			}

			if (dateIndex != -1) {
				if (this.hldData.Year === y) {
					return (this.hldData.JsonStr || [])[dateIndex] || {};
				}
			} else {
				return false;
			}
			return {};
		},
		lastYear() {
			this.year = this.year - 1;
			this.createClendar();
			if (this.mode == 2) {
				this.pickMonth(this.month, this.year);
			}
		},
		lastMonth() {
			if (this.month == 1) {
				this.year = this.year - 1;
				this.month = 12;
			} else {
				this.month = this.month - 1;
			}
			this.currAct += 1;
			// eslint-disable-next-line vue/custom-event-name-casing
			this.$emit('changeDate', this.currAct);
			this.createClendar();
		},
		nextYear() {
			this.year = this.year + 1;
			if (this.mode == 2) {
				this.pickMonth(this.month, this.year);
			}
			this.createClendar();
		},
		nextMonth() {
			if (this.month == 12) {
				this.year = this.year + 1;
				this.month = 1;
			} else {
				this.month = this.month + 1;
			}
			this.currAct -= 1;
			// eslint-disable-next-line vue/custom-event-name-casing
			this.$emit('changeDate', this.currAct);
			this.createClendar();
		},
		init() {
			// var date = new Date();
			console.log(this.defaultDate ,'this.defaultDate 日历里面');
			var date = new Date(this.defaultDate + (this.tomorrow ? 3600 * 24 * 1000 : 0));
			this.year = date.getFullYear();
			this.month = date.getMonth() + 1;
			this.day = date.getDate();
			// this.currdays = date.getDate();
			// this.currMonth = date.getMonth() + 1;
			this.currdays = new Date().getDate();
			this.currMonth = new Date().getMonth() + 1;
			this.today = new Date(this.year + '/' + this.month + '/' + this.day) * 1;
			
			// console.log(this.activiteDay,'this.activiteDay');
			if (!this.startDate) {
				const year = date.getFullYear(),
					month = date.getMonth() + 1,
					day = date.getDate();
				this.startDates = this.resetTime(year + '/' + month + '/' + day);
				this.startYear = year;
				this.startMonth = month;
			} else {
				this.startDates = this.resetTime(this.startDate);
				var dd = this.startDate.replace(/-/g, '/').split('/');
				this.startYear = dd[0];
				this.startMonth = dd[1];
			}
			if (!this.endDate) {
				// var temp = this.startDates + 24 * 60 * 60 * 1000;
				// var dateTemp = new Date(temp);
				// const year = dateTemp.getFullYear(),
				//     month = dateTemp.getMonth() + 1,
				//     day = dateTemp.getDate();
				// this.endDates = this.resetTime(year + "/" + month + "/" + day);
				// this.endYear = year;
				// this.endMonth = month;
			} else {
				this.endDates = this.resetTime(this.endDate);
				let dd = this.endDate.replace(/-/g, '/').split('/');
				this.endYear = dd[0];
				this.endMonth = dd[1];
			}
			// 创建日历数据
			this.createClendar(); 
			if (this.mode == 1) { 
				this.chooseDate(this.currdays, this.currMonth, this.year);
			} else {
				this.pickMonth(this.month - 1, this.year);
			}
		},
		// 创建每个月日历数据，传入月份1号前面用null填充
		createDayList(month, year) {
			const count = this.getDayNum(month, year),
				// eslint-disable-next-line id-match
				_week = new Date(year + '/' + month + '/1').getDay();
			let list = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28];
			for (let i = 29; i <= count; i++) {
				list.push(i);
			}
			for (let i = 0; i < _week; i++) {
				list.unshift(null);
			}
			return list;
		},
		// 计算传入月份有多少天
		getDayNum(month, year) {
			let dayNum = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
			if ((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0) {
				dayNum[1] = 29;
			}
			return dayNum[month - 1];
		},
		// 根据当天和结束日期创建日历数据
		createClendar() {
			var yearTemp = this.year;
			var monthTemp = this.month; 
			this.calendar = [];
			for (let i = 0; i < this.initMonth; i++) {
				let year = yearTemp;
				let month = monthTemp + i;
				let monthData = {
					dayList: [],
					month: '',
					year: ''
				};
				var m = Math.ceil(month / 12);
				if (m > 0) {
					year += m - 1;
				} else {
					year += m - 1;
				}
				if (month > 12) {
					month = month % 12 == 0 ? 12 : month % 12;
				}
				if (month <= 0) {
					month = 12 + (month % 12);
				}
				monthData.year = year;
				monthData.month = month;
				monthData.dayList = this.createDayList(month, year);
				this.calendar.push(monthData);
			} 
			this.$emit('created', { year: this.year, month: this.month });
			// this.$emit('init')
			// h5默认页面加载到当前日期start-date的位置
			if (document) {
				this.scrollTop(this.startYear, this.startMonth);
			}
			// this.$nextTick(() => {
			// 	console.log(99999);
			// 	this.getCurrentSwiperHeight('.swiperItem');
			// });
		},
		scrollTop(year, month) {
			var id = year + '' + parseInt(month);
			setTimeout(() => {
				var obj = document.getElementById(id);
				if (!obj) return;
				var wrap = document.getElementById('scrollWrap');
				wrap.scrollTop = obj.offsetTop - 40;
			}, 0);
		},
		// 添加日历样式
		addClassName(day, month, year) {
			if (!day) return;
			const date = new Date(year + '/' + month + '/' + day);
			let className = [];
			// if (_date.getDay() == 0 || _date.getDay() == 6) { //周末或周六样式
			//     className.push('weekend')
			// }
			if (date * 1 == this.today) {
				className.push('today');
			}
			// 当天和结束日期之外不可选
			date * 1 < this.today && className.push('disabled'); 
			date * 1 > className.push('disabled');
			return className.join(' ');
		},

		// theme获取普通日期选中样式背景
		themeBg(day, month, year) {
			if (!this.themeColor) return;
			// const _date = this.resetTime(year + '/' + month + '/' + day);
			// console.log(year + '' + month + '' + day,this.activiteDay,'看看active是什么');
			if (year + '' + month + '' + day == this.activiteDay) {
				return {
					background: this.themeColor,
					color: '#fff',
					width: '60rpx',
					height: '60rpx',
					'line-height': '60rpx',
					margin: '0 auto'
				};
			} else {
				if (this.evens.length > 0 && this.setTip(day, month, year, 2) == '待保养') {
					return {
						border: `1px solid ${this.themeColor}`,
						color: this.themeColor
					};
				} else {
					return {};
				}
			}
		},
		// 清除时间 时 分 秒 毫秒
		resetTime(dateStr) {
			var date = new Date(dateStr.replace(/-/g, '/'));
			date.setHours(0);
			date.setMinutes(0);
			date.setSeconds(0);
			date.setMilliseconds(0);
			return date * 1;
		},
		setTipCurr(val, months) {
			// let today = dayjs(new Date).format('YYYY-MM-DD')
			let arr = this.calendar[0].dayList;
			if (this.currMonth == months) {
				for (let i = 0; i < arr.length; i++) {
					if (this.currdays === val) {
						return '今';
					}
				}
			}
		},
		// flag==1（返回今天，明天，后天)，flag==2（监听是否在evnet数组中)
		setTip(day, month, year, flag) {
			if (!day) return;
			var tip = '';
			// eslint-disable-next-line id-match
			var _date = this.resetTime(year + '/' + month + '/' + day);
			// console.log(_date,this.today,111)
			if (flag == 1) {
				if (_date == this.today) {
					tip = '今';
				}
				// else if (_date - this.today == 24 * 3600 * 1000) {
				//   tip = "明天";
				// } else if (_date - this.today == 2 * 24 * 3600 * 1000) {
				//   tip = "后天";
				// }
				return tip;
			} else {
				let arr = this.evens;
				// console.log(arr,'arr的值')
				// eslint-disable-next-line id-match
				let _date = this.resetTime(year + '/' + month + '/' + day);
				let dates = year + '-' + (month < 10 ? '0' : '') + month + '-' + (day < 10 ? '0' : '') + day;
				for (let i = 0; i < arr.length; i++) {
					if (arr[i].planDate == dates) {
						if (_date > this.today) {
							return '待保养';
						} else {
							if (arr[i].status === 4) {
								return '已完成';
							} else {
								return '待保养';
							}
						}
					}
				}

				return tip;
			}
			// console.log(tip,"tip的值")
		},
		// 未来日期
		isFutureDay(y, m, d) {
			let ymd = `${y}/${m}/${d}`;
			let formatDY = new Date(ymd.replace(/-/g, '/'));
			let showTime = formatDY.getTime();
			let curTime = new Date().getTime();
			if (showTime > curTime) {
				return true;
			} else {
				return false;
			}
		},
		// 标记日期
		isSiginDay(y, m, d) {
			// console.log(item,'item的值', this.dateList)
			let flag = '';
			let dy = String(y) + String(m > 9 ? m : '0' + m) + String(d > 9 ? d : '0' + d);
			// let dy = `${y}-${m>9?m:"0"+m}-${d>9?d:"0"+d}`;
			let markDays = this.dateList;
			for (let i = 0; i < markDays.length; i++) {
				if (markDays[i].signDate == dy) {
					if (markDays[i].holiday === 1) {
						return  '休息';
					}
					if (markDays[i].holiday == 2
					) {
						return  '值班';
					} else {
						// 如果是打卡页面返回小圆点,如果是考勤页面不返回
						if (this.isClock) {
							if (markDays[i].signBeLate === 1 && markDays[i].signOutLeaveEarly === 1) {
								(flag =  '#69CD00' );
								return flag;
							} else {
								(flag =  '#E02020' );
								return  flag;
							} 
						} else {
							return '上班';
						}
					}
				}
			}
		},
		dateFormat(times) {
			let date = new Date(times);
			let recent = '';
			if (times == this.today) {
				recent = '今天';
			} else if (times - this.today === 24 * 3600 * 1000) {
				recent = '明天';
			} else if (times - this.today === 2 * 24 * 3600 * 1000) {
				recent = '后天';
			}
			var year = date.getFullYear();
			var month = parseInt(date.getMonth() + 1) > 9 ? parseInt(date.getMonth() + 1) : '0' + parseInt(date.getMonth() + 1);
			var day = date.getDate() > 9 ? date.getDate() : '0' + date.getDate();
			return {
				dateStr: year + '-' + month + '-' + day,
				week: '周' + this.weekList[date.getDay()],
				recent
			};
		},
		// 选择日
		chooseDate(day, month, year) {
			console.log(this.activiteDay,22232);
			this.activiteDay = year + '' + month + '' + day;
			let holiday = this.setHolidays(year + '/' + month + '/' + day) || {};
			// if(this.isFutureDay(year,month,day)){
			// 	uni.showToast({
			// 		title:"当前日期无效",
			// 		icon:"none"
			// 	})
			// }
			// this.$emit('chooseDate', day, month, year);
			// eslint-disable-next-line vue/custom-event-name-casing
			this.$emit('chooseDate', day > 9 ? day : '0' + day, month > 9 ? month : '0' + month, year, holiday);
		},
		// 月份选择
		pickMonth(idx) {
			// console.log(idx,111)
			this.month = idx + 1;
			// this.$emit('chooseMonth', idx + 1, this.year);
			// eslint-disable-next-line vue/custom-event-name-casing
			this.$emit('chooseMonth', this.month > 9 ? this.month : '0' + this.month, this.year);
		}
	}
};
</script>

<style lang="scss" scoped>
$color: #0091ff;
.header {
	width: calc(100% - 40rpx);
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	height: 68rpx;
	padding: 0 20rpx;
	align-items: center;
	background: #f5fbff;
	color: $color;
	font-size: 28rpx;
	.date-title {
		font-weight: bold;
	}
	.btns {
		display: flex;
		align-items: center;
	}
}

.calendar-tz {
	width: 100%;
	background: #fff;
	display: -webkit-box;
	display: flex;
	-webkit-flex-direction: column;
	flex-direction: column;
	// &.fixed {
	// 	position: fixed;
	// 	width: 100%;
	// 	height: 100%;
	// 	left: 0;
	// 	top: 0;
	// 	z-index: 900;
	// }
	.week-number {
		background: #fff;
		padding: 0 1%;
		// box-shadow: 0 2px 15px rgba(100, 100, 100, 0.1);
		text {
			display: inline-block;
			text-align: center;
			padding-top: 20rpx;
			font-size: 28rpx;
			width: 14.28%;
			color: #999999;
			//   &:first-child,
			//   &:last-child {
			//     color: $color;
			//   }
		}
	}
	.tips {
		padding: 6px 10px;
		background: #fff7dc;
		font-size: 12px;
		color: #9e8052;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.content {
		-webkit-box-flex: 1;
		flex: 1;
		// overflow-y: scroll;
		-webkit-overflow-scrolling: touch;
		.con {
			color: #333;
			// padding-top: 10px;
			position: relative;

			.month-bg {
				position: absolute;
				text-align: center;
				opacity: 0.4;
				left: 0;
				right: 0;
				bottom: 0;
				top: 20%;
				font-size: 220px;
				font-weight: bold;
				color: #f8f8f8;
			}
			.each-month {
				display: block;
				width: 98%;
				font-size: 0;
				margin: 0 auto;
				padding-left: 0;
				padding-bottom: 10px;
				// border-bottom: 1px solid #eee;
				.each-day {
					position: relative;
					display: inline-block;
					text-align: center;
					vertical-align: middle;
					width: 13.28%;
					font-size: 30rpx;
					height: 80rpx;
					margin: 2px 0.5%;
					view {
						display: inline-block;
						font-size: 28rpx;
						width: 98%;
						height: 100%;
						// justify-content: space-around;
						justify-content: center;
						display: -webkit-box;
						display: flex;
						-webkit-flex-direction: column;
						flex-direction: column;
						border-radius: 9px;
						position: relative;
					}
					&.between {
						background: rgba(75, 217, 173, 0.1);
					}
					.day {
						font-size: 30rpx;
						margin: 0;
					}
					.currDayColor {
						color: #ffffff;
					}
					.currDay {
						position: absolute;
						top: 0;
						right: 15rpx;
						font-size: 18rpx;
						// color: #ffffff;
						height: 20rpx;
						width: 30rpx;
					}
					.day-tip,
					.recent {
						font-size: 10px;
						height: 28rpx;
						padding-bottom: 3px;
						color: #ff5500;
						margin: 0;
						i {
							font-size: 10px;
						}
					}
					.work{
						color: #0091ff;
					}
					.duty{
						color: #E02020;
					}
					.radioday {
						width: 12rpx;
						height: 12rpx;
						background: #fff;
						border-radius: 50%; 
						margin: 0 auto;
						margin-top: 10rpx;
					}
					.today {
						background: rgba(100, 100, 100, 0.1);
					}
					.trip-time {
						background: $color;
						color: #fff !important;
						.recent,
						.day-tip {
							color: #fff !important;
						}
					}
					.weekend {
						color: $color;
					}
				}
			}
		}
	}

	.month-pick {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		width: 100%;
		margin-top: 15rpx;
		&-month {
			width: 23%;
			font-size: 28rpx;
			text-align: center;
			color: #333;
			padding: 15rpx 0;
			border-radius: 12rpx;
			margin: 10rpx 0;
		}
		.activity {
			background-color: $color;
			color: #fff;
		}
	}
}
/***右侧进入动画***/
.slide-enter-active,
.slide-leave-active {
	-webkit-transition: all 0.2s ease;
	transition: all 0.2s ease;
}
.slide-enter,
.slide-leave-to {
	-webkit-transform: translateX(100%);
	transform: translateX(100%);
}

// 箭头图标
.btn-icon {
	width: 40rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}
.arrow-right {
	height: 30rpx;
	width: 15rpx;
	display: inline-block;
	position: relative;
}
.arrow-right::after {
	content: '';
	height: 6px;
	width: 12rpx;
	top: 6rpx;
	border-width: 3rpx 3rpx 0 0;
	border-color: $color;
	border-style: solid;
	transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
	position: absolute;
}
.arrow-left {
	height: 30rpx;
	width: 15rpx;
	display: inline-block;
	position: relative;
}
.arrow-left::after {
	content: '';
	height: 6px;
	width: 12rpx;
	top: 6rpx;
	border-width: 0 0 3rpx 3rpx;
	border-color: $color;
	border-style: solid;
	transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
	position: absolute;
}
</style>
